<script lang="ts" setup>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
  pageName: {
    type: String,
    default: '页面标题'
  }
})

const currentTime = ref(dayjs().format('HH:mm:ss'))

const getCurrentDateTime = computed(() => {
  const curTime = dayjs().format('YYYY年MM月DD日')
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const weekDay = weekDays[dayjs().day()]
  return `${curTime} ${currentTime.value} ${weekDay}`
})
//定时器
setInterval(() => {
  currentTime.value = dayjs().format('HH:mm:ss')
}, 1000)

</script>

<template>
  <div class="header-bi">
    <a-row class="template-head-view">
      <a-col :span="6">
        <div class="template-head-date">
          {{getCurrentDateTime}}
        </div>
      </a-col>
      <a-col :span="12" class="template-head-title">
        {{props.pageName}}
      </a-col>
    </a-row>
  </div>
</template>

<style lang='less' scoped>
@font-size: 16px;
@font-size-mini: 14px;
@font-size-medium: 18px;
@font-size-large: 20px;
@color-w: white;


.template-head-view {
  width: 100%;
  height: 100%;
}


.template-head {
  height: 100%;
  display: flex;
  align-items: center;
}


.template-head-date {
  font-size: @font-size-medium;
  letter-spacing: 1px;
  padding-left: 38px;
  padding-bottom: 30px;
  line-height: 40px;
  box-sizing: border-box;
}


.template-head-title {
  font-size: 48px;
  text-align: center;
  font-weight: bold;
}
</style>